<template>
  <div>
    <el-table :data="cutObj.records" style="width: 100%;height:200px;">
      <el-table-column prop="name" label="角色名称" width="300"/>
      <el-table-column fixed="right" label="操作" width="700">
        <template #default="scope">
          <el-button type="primary" @click="del(scope.row.id)">删除角色</el-button>
          <el-button type="primary" @click="find(scope.row.id)">查看角色权限</el-button>
          <el-button type="primary" @click="update(scope.row.id)">修改角色权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:page-size="cutObj.size"
        background
        :total="cutObj.total"
        @current-change="findByItem"
    />
    <el-button type="primary" @click="add()">添加</el-button>
<!-- 查看角色权限   -->
    <el-dialog
        v-model="findVisible"
        title="查看角色权限"
        width="30%"
    >
      <div>
        <el-form :label-position='"left"' label-width="100px" :model="role">
          <el-form-item label="角色名称">
            {{ role.name }}
          </el-form-item>
          <el-form-item label="拥有权限" >
            <span  v-for="grade in role.gradeBean" :key="grade.id"> {{grade.name}},</span>
          </el-form-item>
          <el-button type="primary" @click="findVisible = false">确定</el-button>
        </el-form>
      </div>
    </el-dialog>
<!--修改权限-->
    <el-dialog
        v-model="updateVisible"
        title="修改角色权限"
        width="30%"
    >
      <div>
        <el-form :label-position='"left"' label-width="100px" :model="role">
          <el-form-item label="角色名称">
            {{ role.name }}
          </el-form-item>
          <el-form-item label="拥有权限" >
            <el-checkbox  v-for="grade in role.records"  v-model="checked1" :label="grade.id"   size="large" > {{grade.name}}</el-checkbox>
          </el-form-item>
          <el-button type="primary" @click="findVisible = false">确定</el-button>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      cutObj: [],
      role:[],
      roleObj:{},
      grade:{},
      findVisible:false,
      updateVisible:false,
      checked1:{},
    }
  },
  methods: {
    findByItem(pageNO) {

      axios.get("/project/role/findByItem", {params:{
        pageNO:pageNO
        }}).then(resp => {
        this.cutObj = resp.data
      })
    },
    find(id){
      this.findVisible=true;
      axios.get("/project/role/findById", {params:{
          id:id
        }}).then(resp => {
          console.log(resp.data)
        this.role = resp.data
      })
    },
    update(id){
      this.updateVisible=true;
      axios.get("/project/role/findById", {params:{
          id:id
        }}).then(resp => {
        console.log(resp.data)
        this.role = resp.data
      })
    }
  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>
